La propiedad border-style

Esta propiedad especifica qué tipo de borde mostrar:

Un borde punteado.

Un borde con guiones.

Un borde sólido.

Un borde doble.

Un borde en relieve (groove).

Un borde en cresta (ridge).

Un borde empotrado (inset).

Un borde saliente (outset).

Sin borde.

Un borde combinado.




La propiedad border-width

Esta propiedad especifica el ancho de los cuatro bordes:

Algo de texto.

Algo de texto.

Algo de texto.

Algo de texto.

Algo de texto.

Algo de texto.

Nota: La propiedad "border-width" no funciona si se usa sola. Siempre se debe especificar la propiedad "border-style" primero.




Border-width con múltiples valores

La propiedad border-width puede tener de uno a cuatro valores (para los bordes superior, derecho, inferior e izquierdo):

Algo de texto.

Algo de texto.

Algo de texto.




La propiedad border-color

Esta propiedad especifica el color de los cuatro bordes:

Un borde rojo sólido

Un borde verde sólido

Un borde azul punteado

Nota: La propiedad "border-color" no funciona si se usa sola. Primero utiliza la propiedad "border-style".

Ademas de que se pueden configurar los colores de la manera que vimos la practica pasada, con las 3 formas distintas


Bordes individuales

4 different border styles.

3 different border styles.

2 different border styles.

1 border style.


Borde de un solo lado del texto

Borde completo

Solo borde en el lado izquierdo

Borde abajo del texto


The border-radius Property

This property is used to add rounded borders to an element:

Borde normal

Borde poco redondor

Borde mas o menos redondo

Borde muy redondo